<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的props通信</title>
</head>
<body>

<!--有点绕，学完立刻编码加深印象-->

<div id="app">
    <html-a text="world"></html-a>
    <html-a v-bind:text="message"></html-a>
</div>


<script src="../js/vue.js"></script>
<script>
    //去掉警告
    Vue.config.productionTip = false;

    //局部组件
    const childComponent = {
        data() {
            return {
                message : '局部组件'
            }
        },
        template : `
              <div>{{text}} {{message}}</div>
        `,
        props : ['text']
    };

    //数据对象
    const dataObj = {
        message : 'Hello, Vue!',
    };

    //创建一个Vue对象
    //父组件
    const app = new Vue({
        el : '#app',
        data : dataObj,
        components : {
            'html-a' : childComponent
        },

        //计算属性，固定名称
        computed : {

        },

        //方法
        methods : {

        }
    });










</script>
</body>
</html>
